<!-- 处置措施 -->
<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>处置措施</span>
    </div>
    <el-card
      class="box-card"
      v-for="(Activity, disposalIndex) in ActivityAreaList"
      :key="disposalIndex"
      style="margin-top: 20px"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-row>
        <el-col :span="6">
          <div style="display: flex">
            <div
              style="
                line-height: 36px;
                font-size: 14px;
                color: #606266;
                font-weight: 700;
                margin-right: 10px;
              "
            >
              区域/设备
            </div>
            <el-select
              :disabled="titleDisabled"
              clearable
              v-model="Activity.zoneofaction"
              placeholder="请选择区域/设备"
              style="width: 170px"
            >
              <el-option label="区域" value="区域"></el-option>
              <el-option label="设备" value="设备"></el-option>
            </el-select>
            <div style="margin-left: 1%">
              <el-button
                type="text"
                icon="el-icon-plus"
                v-if="disposalIndex === ActivityAreaList.length - 1"
                @click="addArea(disposalIndex)"
                circle
              ></el-button>
            </div>
            <div style="margin-left: 1%">
              <el-button
                type="text"
                icon="el-icon-minus"
                @click="removedArea(disposalIndex)"
                circle
              ></el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <div
              style="
                line-height: 36px;
                font-size: 14px;
                color: #606266;
                font-weight: 700;
                width: 101px;
              "
            >
              区域/设备名称
            </div>
            <el-input
              :disabled="titleDisabled"
              v-model="Activity.AccidentArea"
              autocomplete="off"
              placeholder="请输入区域/设备名称"
              style="width: 284px"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div style="display: flex">
            <div
              style="
                line-height: 36px;
                font-size: 14px;
                color: #606266;
                font-weight: 700;
                width: 130px;
              "
            >
              处置措施名称
            </div>
            <el-input
              :disabled="titleDisabled"
              v-model="Activity.MeasureName"
              placeholder="请输入处置措施名称"
              autocomplete="off"
              style="width: 284px"
            ></el-input>
          </div>
        </el-col>
      </el-row>

      <!-- 序号 -->
      <el-row style="margin-top: 30px">
        <el-col :span="4">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span>处置序号</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="addDisposal(disposalIndex)"
                >+</el-button
              >
            </div>
            <div
              v-for="(Disposal, index) in Activity.Disposalserialnumber"
              :key="index"
            >
              <div
                :style="{
                  width: '112%',
                  marginLeft: '-20px',
                  textAlign: 'center',
                  lineHeight: '42px',
                  paddingLeft: '17px',
                  display: 'flex',
                  lineHeight: '36px',
                  // justifyContent: 'space-between',
                  backgroundColor:
                    Activity.currentDisposal === index
                      ? 'rgb(153 153 154 / 19%)'
                      : 'initial',
                  color:
                    Activity.currentDisposal === index ? '#038ff3' : 'initial',
                  cursor: 'pointer',
                }"
                @click="showCard(disposalIndex, index)"
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    width: 200px;
                    margin-left: 20px;
                  "
                >
                  NO.{{ index + 1 }}
                  <el-button
                    type="text"
                    @click="removeDisposal(disposalIndex, index)"
                    >-</el-button
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="20">
          <el-card v-if="isCardVisible" style="margin-left: 30px">
            <div
              v-for="(Disposal, index) in Activity.Disposalserialnumber"
              :key="index"
              v-show="Activity.currentDisposal === index"
            >
              <!-- 预案处理步骤和处理人员内容 -->
              <!-- <div style="display: flex">
                  <div
                    style="
                      line-height: 36px;
                      font-size: 14px;
                      color: #606266;
                      font-weight: 700;
                      margin-right: 10px;
                    "
                  >
                    处置步骤
                  </div>
                  <el-select
                     
                    v-model="Disposal.DealStep"
                    placeholder="请选择预案处理步骤"
                  >
                    <el-option
                      v-for="item in Planprocessingstepsliest"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </div> -->
              <div
                v-for="(item, itemIndex) in Disposal.divContents"
                :key="itemIndex"
              >
                <!-- <div style="display: flex">
                    <div
                      style="
                        line-height: 36px;
                        font-size: 14px;
                        color: #606266;
                        font-weight: 700;
                        margin-right: 10px;
                      "
                    >
                      处理人员
                    </div>
                    <el-select
                      v-model="item.DealExecutor"
                       
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="person in Processingpersonnelliest"
                        :key="person"
                        :label="person"
                        :value="person"
                      ></el-option>
                    </el-select>
                    <div style="margin-left: 1%">
                      <el-button
                        type="primary"
                        plain
                        v-if="itemIndex === Disposal.divContents.length - 1"
                        @click="
                          addContentWithDealExecutor(
                            disposalIndex,
                            index,
                            itemIndex
                          )
                        "
                        >+</el-button
                      >
                    </div>
                    <div style="margin-left: 1%">
                      <el-button
                        type="danger"
                        plain
                        @click="removeContent(disposalIndex, index, itemIndex)"
                        >-</el-button
                      >
                    </div>
                  </div> -->
                <div style="display: flex; flex-wrap: wrap; width: 1270px">
                  <div
                    v-for="(content, contentIndex) in item.contents"
                    :key="contentIndex"
                    style="
                      display: flex;
                      flex-wrap: wrap;
                      margin-top: 25px;
                      width: 559px;
                      margin-left: 6px;
                    "
                  >
                    <div style="line-height: 34px">{{ contentIndex + 1 }}.</div>

                    <el-popover
                      placement="top-start"
                      width="300"
                      trigger="click"
                    >
                      <el-input
                        class="borderNone"
                        type="textarea"
                        autosize
                        size="medium"
                        resize="none"
                        v-model="content.value"
                        :autosize="{ minRows: 2, maxRows: 20 }"
                        @input="
                          updateContent(
                            disposalIndex,
                            index,
                            itemIndex,
                            contentIndex
                          )
                        "
                      ></el-input>
                      <template slot="reference">
                        <el-input
                          :disabled="titleDisabled"
                          :rows="1"
                          placeholder="请输入处置内容"
                          v-model="content.value"
                          @input="
                            updateContent(
                              disposalIndex,
                              index,
                              itemIndex,
                              contentIndex
                            )
                          "
                          style="margin-left: 20px; width: 159%"
                        ></el-input>
                      </template>
                    </el-popover>
                    <div style="margin-left: 28%">
                      <el-button
                        v-if="contentIndex === item.contents.length - 1"
                        type="primary"
                        plain
                        @click="
                          addContents(
                            disposalIndex,
                            index,
                            itemIndex,
                            contentIndex
                          )
                        "
                        >+</el-button
                      >
                    </div>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="contentIndex === item.contents.length - 1"
                        type="danger"
                        plain
                        @click="
                          removeContents(
                            disposalIndex,
                            index,
                            itemIndex,
                            contentIndex
                          )
                        "
                        >-</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </el-card>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  getLists,
  insertData,
  deletelist,
  ModifierList,
} from "../../../api/Genericmethods/GeneralQuery";
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: {},
  props: ["basicInformationForm", "title"],
  data() {
    return {
      ActivityAreaList: [
        {
          zoneofaction: "",
          AccidentArea: "",
          MeasureName: "",
          // 左边的选中状态
          currentDisposal: 0,
          Disposalserialnumber: [
            {
              divContents: [
                {
                  contents: [{ value: "" }, { value: "" }], //处置内容
                },
              ],
            },
          ], // 存储处置信息的数组
        },
      ],
      isCardVisible: true,
      newlists: [],
    };
  },
  // 计算属性 类似于data概念
  computed: {
    // 标题
    titleDisabled() {
      return this.title === "详情"; // 判断标题是否为"详情"
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 获取具体步骤列表
    Listofspecificsteps() {
      getLists("EmergPlan_SpecRspMrs_Deal")
        .then((data) => {
          let array = [];
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.PlanName == this.basicInformationForm.PlanName) {
              array.push(element);
            }
          }
          console.log(array);
          this.ActivityAreaList = [];
          const sortedData = array.sort((a, b) => {
            return a.DealCode - b.DealCode;
          });
          sortedData.forEach((item, index) => {
            let activityArea = this.ActivityAreaList.find(
              (i) => i.MeasureName === item.MeasureName
            );
            if (!activityArea) {
              activityArea = {
                zoneofaction: "",
                AccidentArea: "",
                MeasureName: item.MeasureName,
                currentDisposal: 0,
                Disposalserialnumber: [],
              };
              this.ActivityAreaList.push(activityArea);
            }

            let disposalSerialNumber = activityArea.Disposalserialnumber.find(
              (i) => i.divContents[0].code === item.DealCode
            );
            if (!disposalSerialNumber) {
              disposalSerialNumber = {
                divContents: [
                  {
                    code: item.DealCode,
                    contents: [],
                  },
                ],
              };
              activityArea.Disposalserialnumber.push(disposalSerialNumber);
            }

            for (let i = 1; i <= 10; i++) {
              let dealContentKey = `DealContent${i}`;
              let dealContentValue = item[dealContentKey] || "";
              if (dealContentValue !== "") {
                disposalSerialNumber.divContents[0].contents.push({
                  value: dealContentValue,
                });
              }
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getFormData() {
      return this.ActivityAreaList;
    },
    // 活动区域+
    addArea(ActivityIndex) {
      const newActivity = {
        zoneofaction: "",
        AccidentArea: "",
        MeasureName: "",
        // 新增添加左边默认选中list第一个元素
        currentDisposal: 0,
        Disposalserialnumber: [
          {
            divContents: [
              {
                contents: [{ value: "" }],
              },
            ],
          },
        ],
      };
      // this.ActivityAreaList.splice(ActivityIndex + 1, 0, newActivity);
      this.ActivityAreaList.push(newActivity);
    },
    // 活动区域-
    removedArea(ActivityIndex) {
      if (this.ActivityAreaList.length > 1) {
        this.ActivityAreaList.splice(ActivityIndex, 1);
      }
    },
    addDisposal(ActivityIndex) {
      const newDisposal = {
        index:
          this.ActivityAreaList[ActivityIndex].Disposalserialnumber.length + 1,
        divContents: [
          {
            contents: [{ value: "" }],
          },
        ],
      };
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber.push(
        newDisposal
      ); // 将新的处置添加到数组中
    },
    removeDisposal(ActivityIndex, index) {
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber.splice(
        index,
        1
      ); // 从数组中删除指定序号的处置
      if (this.currentDisposal === index) {
        this.isCardVisible = false;
        this.currentDisposal = 0;
      }
    },
    showCard(ActivityIndex, index) {
      // 把index提到数组对象里面控制左边的切换
      this.ActivityAreaList[ActivityIndex].currentDisposal = index;
      this.isCardVisible = true;
    },
    // 处置内容输入框内容
    updateContent(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      const content =
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents[innerIndex];
    },
    // 处置内容+
    addContents(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      const newContent = { value: "" };
      const contents =
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents;

      // 检查当前内容数量是否已经达到上限
      if (contents.length >= 10) {
        this.$message.error("内容数量已达到上限");
        return;
      }
      // console.log(newContent.value.length);
      // // 检查新内容的长度是否超过了限制
      // if (newContent.value.length > 4000) {
      //   this.$message.error("内容长度超过限制");
      //   return;
      // }

      contents.splice(innerIndex + 1, 0, newContent);
    },
    // 处置内容-
    removeContents(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      if (
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents.length > 1
      ) {
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
          disposalIndex
        ].divContents[contentIndex].contents.splice(innerIndex, 1);
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.title != "添加") {
      this.Listofspecificsteps();
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.box-card1 {
  ::v-deep .el-card__body {
    padding: 0;
  }
}
.borderNone ::v-deep .el-textarea__inner {
  border: none;
  height: 100%;
}
</style>
